<!-- 柱状图 -->
<style lang="stylus" scoped>
.chart{
  height :400px;
  /*background-color: #578EBE;*/
  background-color: #f8f8f8;
  border:1px solid #ffffff;
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
  border-radius: 3px;
  color : white;
}
.chart .main{
    width:100%;
    height: calc(100% - 1px);
    margin-top :20px;
  }

</style>

<template>
<div class="chart">
  <div v-if="index == 'first'" class="main first"></div>
  <div v-if="index == 'second'" class="main second"></div>
  <div v-if="index == 'third'" class="main third"></div>
  <div v-if="index == 'fourth'" class="main fourth"></div>
  <div v-if="index == 'fifth'" class="main fifth"></div>
  <div v-if="index == 'sixth'" class="main sixth"></div>
  <div v-if="index == 'seventh'" class="main seventh"></div>
  <div v-if="index == 'eighth'" class="main eighth"></div>
  <div v-if="index == 'ninth'" class="main ninth"></div>
  <div v-if="index == 'tenth'" class="main tenth"></div>
  <div v-if="index == 'eleventh'" class="main eleventh"></div>

</div>



</template>

<script>
  import echarts from 'echarts'

export default {
  props:["chartOption","index"],
  data() {
    return {
      legendArr: [],
      color: this.$store.state.color,
      myChart: {},
      name: '信使任务'
    }
  },
  methods: {
    _init() {
      this.legendArr = this.myChart.getOption().series;
      this.legendArr.forEach((data) => {
        data.selected = true;
      })
      //this.$root.charts.push(this.myChart);
      window.addEventListener('resize', function() {
        this.myChart.resize()
      }.bind(this))
    }
  },
  watch:{
    chartOption:{
      handler(curVal){
        this.myChart.setOption(curVal);
      },
      deep:true
    }
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    let queryEle = ".chart .main."+this.index;
    this.myChart = echarts.init(document.querySelector(queryEle));
    this.myChart.setOption(this.chartOption);
    this._init();
  },

}
</script>
